<template>
  <div class="all">
    <div class="section">
      <div class="container">
        <div class="row full-height justify-content-center">
          <div class="col-12 text-center align-self-center py-5">
            <div class="section pb-5 pt-5 pt-sm-2 text-center">
              <h6 class="mb-0 pb-3">
                <span style="font-size: 28px">登录 </span><span style="font-size: 28px">注册</span>
              </h6>
              <input
                  class="checkbox"
                  type="checkbox"
                  id="reg-log"
                  name="reg-log"
              />
              <label for="reg-log"></label>
              <div class="card-3d-wrap mx-auto">
                <div class="card-3d-wrapper">
                  <div class="card-front">
                    <div class="center-wrap">
                      <div class="section text-center">
                        <h4 class="mb-4 pb-3">登录</h4>
                        <div class="form-group">
                          <input
                              type="text"
                              name="logemail"
                              class="form-style"
                              placeholder="用户名"
                              id="logemail"
                              autocomplete="off"
                              v-model="user.username"
                          />
                          <i class="input-icon uil uil-at"></i>
                        </div>
                        <div class="form-group mt-2">
                          <input
                              type="password"
                              name="logpass"
                              class="form-style"
                              placeholder="密码"
                              id="logpass"
                              autocomplete="off"
                              v-model="user.password"
                          />
                          <i class="input-icon uil uil-lock-alt"></i>
                        </div>
                        <a href="javascript:void(0)" @click="handleForm(0)" class="btn mt-4" style="font-size: 25px" >登录</a>
                        <p class="mb-0 mt-4 text-center">
                          <a href="javascript:void(0)" @click="handlePassword" class="link">忘记密码?</a>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card-back">
                    <div class="center-wrap">
                      <div class="section text-center">
                        <h4 class="mb-4 pb-3">注册</h4>
                        <div class="form-group">
                          <input
                              type="text"
                              name="logname"
                              class="form-style"
                              placeholder="姓名"
                              id="logname"
                              autocomplete="off"
                              v-model="user.name"
                          />
                          <i class="input-icon uil uil-user"></i>
                        </div>
                        <div class="form-group mt-2">
                          <input
                              type="text"
                              name="logemail"
                              class="form-style"
                              placeholder="用户名"
                              id="logemail"
                              autocomplete="off"
                              v-model="user.username"
                          />
                          <i class="input-icon uil uil-at"></i>
                        </div>
                        <div class="form-group mt-2">
                          <input
                              type="password"
                              name="logpass"
                              class="form-style"
                              placeholder="密码"
                              id="logpass"
                              autocomplete="off"
                              v-model="user.password"
                          />
                          <i class="input-icon uil uil-lock-alt"></i>
                        </div>
                        <a href="#" class="btn mt-4" @click="handleForm(1)" style="font-size: 25px">注册并登录</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import "../assets/useraccess/js/script.js"
import {ref,getCurrentInstance} from 'vue'
import {useUserStore} from "../store/useUserStore.js";
import {useRouter} from 'vue-router'

const {proxy} = getCurrentInstance()
const router = useRouter()
const userStorage = useUserStore()
const user = ref({
  name:'蔡虚鲲',
  username:'ikun',
  password:'123'
})

// 提交表单
const handleForm = (val) => {
  // val ==> 0.登录 1.注册
  if (val === 0){
    // 登录
    proxy.request.post('/users/login',user.value).then(res => {
      if (res.code === 1){
        // 存储user
        localStorage.setItem('user',JSON.stringify(res.data))
        userStorage.user = res.data
        // 路由跳转
        router.push({
          name: 'Home',
        })
      }
    })
  }else {
    // 注册
  }
}

// 忘记密码
const handlePassword = () => {
  proxy.$message.warning('暂不支持修改密码')
}

</script>

<style scoped>
@import "../assets/useraccess/css/bootstrap.min.css";
/*@import "../assets/useraccess/css/unicons.css";*/
@import "../assets/useraccess/css/style.css";
@import '../assets/useraccess/css/css.css?family=Poppins:400,500,600,700,800,900'

* {
  /*background-color: #1f2029;*/

}

.all {
  /*width: 100%;*/
  /*height: 100%;*/
  /*position: fixed;*/
  /*top: 0;*/
  /*left: 0;*/
  /*background-color: #1f2029;*/
  background: url("../../public/star02.png") no-repeat;

}

</style>
